/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a{text-decoration:none;}
a:hover{text-decoration: underline;}
body{margin:0;padding:0;font: 12px "Microsoft YaHei","SimSun","Arial Narrow",HELVETICA;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a,a:hover{color:#333;}
input,img { vertical-align: middle}
img { border: 0;}
.mod-l:after, .mod-r:after, .container:after, .wrap:after, .mod:after, .g-hd:after, .bd:after, .g-hd:after, .bd:after, .list:after, .clear:after { display: block; height: 0; content: " "; clear: both;}
.mod-l, .mod-r, .container, .wrap, .mod, .g-hd, .g-bd, .hd, .bd, .list, .clear {
    zoom: 1;
}
.container {
    width: 1120px;
    margin: 0 auto;
}
.mt10 {
    margin-top: 10px;
}
.mt20 {
    margin-top: 10px;
}
.mt30 {
    margin-top: 30px;
}
@mod_color: #4eace7; // 模块的背景色 （如 banner , 单车圣经的背色）

@travel_mod_color: #43d090; //单车旅行主色

.container {
    .mod-l {
        float: left;
    }
    .mod-r {
        float: right;
    }
}

//购买按扭
.g-btn {
    position: relative;
    display: block;
    width: 170px;
    height: 37px;
    background: #fff;
    color: @mod_color;
    text-align: center;
    line-height: 37px;
    font-size: 22px;
    z-index: 999;
    border-radius: 10px;
    &.c-btn2 {
        background: none;
        border: 2px solid #fff;
        color: #fff;
    }
    &.c-btn3 {
        background: @mod_color;
        color: #fff;
    }
    &:hover {
        text-decoration: none;
    }
}

//云块
.g-cloud {
    position: absolute;
    width: 112px;
    height: 78px;
    z-index: 3;
    img {
        width: 100%;
    }
    &.c2 {
        width: 70px;
    }
    &.c3 {
        width: 90px;
    }
}

.title-icon {
    width: 272px;
    height: 30px;
    margin: 60px 0 10px;
    background: url("../img/title_icon.png") no-repeat 0 0;
}

.arrow-line {
    height: 7px;
    width: 100%;
    margin: 15px 0;
    background: url("../img/bicycle_bible/bicycle_bible_2.png") no-repeat 0 0;
}
.footer {
    background: #484848;
    width: 100%;
    padding: 40px 0;
    text-align: center;

    p {
        font: 16px/30px "Microsoft YaHei";
        color: #fff;
    }
}
.header {
    .container {
        position: relative;
    }
    width: 100%;
    height: 48px;
    background: #051e1d;
    .logo {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 82px;
        background: url("../img/icon1.png") no-repeat left top;
    }
    .nav {
        float: right;
        ul {
            overflow: hidden;
            li {
                margin-left: -1px;
                float: left;
                a {
                    display: block;
                    padding: 0 15px;
                    height: 14px;
                    line-height: 14px;
                    margin: 17px 0;
                    color: #ecf0f1;
                    font-size: 14px;
                    border-left: 1px solid #ecf0f1;
                }
            }
        }
    }
}
/*
@name: slider
@description: 轮播共用样式
@require: 无
@author: huaping
*/
.slider {
    position: relative;
    .move-mod {
        position: relative;
        overflow: hidden;
        z-index: 1;
        .list {
            position: relative;
        }
    }
    .btn {
        position: absolute;
        top: 50%;
        widows: 40px;
        height: 40px;
        padding: 10px 0;
        margin: -30px 0 0;
        z-index: 2;
        text-align: center;
        i {
            font-size: 40px;
            line-height: 40px;
        }
        &:hover {
            text-decoration: none;
            i {
                text-decoration: none;
                color: @mod_color;
            }
        }
    }

    .next {
        right: 0;
    }
    .prev {
        left: 0;
    }

    .num-wrap {
        padding: 10px 0 0;
        height: 15px;
        width: 100%;
        text-align: center;
        li {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background: @mod_color;
            *display: inline;
            *zoom: 1;
            margin: 0 5px;
            &:hover {
                cursor: pointer;
                background: #333;
            }
        }
        .active {
            background: #333;
        }
    }
}
/*
    单车圣经－banner
*/
.container {
    width: 970px;
}
.banner {
    height: 540px;
    background: @mod_color url("../img/book1_bg.png") no-repeat center 50px;
    
    .container {
        position: relative;
    }
    
    .mod-l {
        width: 380px;
        margin: 90px 0 0;
    }
    .mod-r {
        width: 570px;
    }
    .cont {
        color: #fff;
        text-align: center;
        h2 {
            margin-top: 175px;
            font: bold 46px/70px "Microsoft YaHei";
        }
        p {
            text-align: center;
            font: 16px/28px "Microsoft YaHei";
        }
        .line {
            border-top: 1px solid #fff;
            padding-top: 10px;
            margin: 0 20px;
        }
    }

    .g-btn {
        margin: 20px auto 0;
    }
    .g-cloud {
        &.c1 {
            left: 265px;
            top: 155px;
        }
        &.c2 {
            left: 0;
            top: 295px;
        }
        &.c3 {
            right: 35px;
            top: 45px;
        }
    }
}
/*
    单车圣经－内容简介
*/
.content-desc {
    height: 600px;
    p {
        font: 14px/26px "Heiti";
        color: #333;
    }
    > p {
        padding-right: 260px;
    }
    
    dl {
        overflow: hidden;
        width: 100%;
        text-align: center;
        dd {
            .icon {
                display: block;
                width: 140px;
                height: 140px;
                margin: 15px auto;
                background: url("../img/public_icon.png") no-repeat 0 0;
                &.i2 {
                    background-position: -141px 0;
                }
                &.i3 {
                    background-position: -282px 0;
                }
            }
            float: left;
            width: 29.3%;
            margin: 0 4% 0 0;
            .mod {

            }
            strong {
                font: 24px/40px "Microsoft YaHei";
            }
        }
    }
}
/*
    单车圣经－创作团队
*/
.creation-team {
    width: 100%;
    height: 600px;
    background: @mod_color;
    overflow: hidden;

    .title-icon {
        background-position: 0 -30px;
        margin: 38px 0 0;
    }
    .arrow-line {
        background-position: 0 -8px;
        margin-top: 5px;
    }

    .g-bd {
        ul {
            overflow: hidden;
            height: 440px;
            padding: 15px 0;
            border-bottom: 1px dashed #fff;
            li {
                float: left;
                width: 24.9%;
                height: 100%;
                color: #fff;

                .mod {
                    height: 100%;
                    margin-left: -1px;
                    padding: 0 20px 0 30px;
                    border-left: 1px dashed #fff;
                }

                strong {
                    font: 24px/34px "Microsoft YaHei";
                }

                p {
                    line-height: 22px;
                    font-size: 12px;
                }
            }

            .line {
                padding: 15px 5px;
                margin: 20px 0 0;
                border: 2px solid #fff;
            }
        }
    }
}
/*
    单车圣经－版面展示
*/
.layout-reveal {
    margin: 40px auto 100px;
    .move-mod {
        ul {
            position: absolute;
            height: 590px;
            li {
                float: left;
                width: 970px;
                img {
                    display: block;
                }
            }
            .active {
                display: block;
            }
        }
    }
    .num-box {
        position: relative;
        width: 100%;
        height: 101px;
        margin-bottom: 15px;
        overflow: hidden;
        ul {
            margin: 15px 0;
            width: 100%;
            position: absolute;
            overflow: hidden;
            li {
                float: left;
                width: 20%;
                opacity: 0.5;
                &:hover {
                    cursor: pointer
                }
                .mod {
                    margin: 0 5px;
                    border: 2px solid @mod_color;
                    img {
                        width: 100%;
                    }
                }
            }
            .active {
                opacity: 1;
            }

        }
    }
}
/*
    单车圣经－内容试读
*/
.content-test-read {
    .title-icon {
        background-position: 0 -60px;
        margin: 38px 0 0;
    }
    .arrow-line {
        margin: 5px 0;
    }
    .g-hd {
        strong {
            display: block;
            line-height: 30px;
            background: #aee0ff;
            text-align: center;
            font-size: 16px;
        }
    }

    //自行车如何调圈
    .test-read {
        overflow: hidden;
        .switch-hd {
            width: 996px;
            height: 303px;
            margin: 20px 0 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #333;

            &.bg0 {
                background: url("../img/bicycle_bible/bicycle_bible_3.jpg") no-repeat 0 0;
            }

            &.bg1 {
                background: url("../img/bicycle_bible/bicycle_bible_4.jpg") no-repeat 0 0;
            }

            &.bg2 {
                background: url("../img/bicycle_bible/bicycle_bible_5.jpg") no-repeat 0 0;
            }

            &.bg3 {
                background: url("../img/bicycle_bible/bicycle_bible_6.jpg") no-repeat 0 0;
            }

            a {
                float: left;
                width: 307px;
                height: 143px;
                margin: 0 25px 15px 0;
                &.r {
                    float: right;
                }
                &.l {
                    float: left;
                }
            }

        }

        .switch-bd {

            .mod {
                display: none;
                p {
                    font: 14px/26px "Microsoft YaHei";
                    color: #242424;
                    overflow: hidden;

                    i {
                        float: left;
                        width: 25px;
                        height: 25px;
                        margin-right: -100%;
                        margin-top: 5px;
                        border-radius: 25px;
                        background: @mod_color;
                        color: #fff;
                        text-align: center;
                        font: 14px/25px "Microsoft YaHei";
                    }

                    .r {
                        float: left;
                        width: 96%;
                        margin-right: -100%;
                        padding-left: 4%;
                    }
                    strong {
                        font-size: 16px;
                    }

                }

                .line {
                    border-bottom: 1px dashed #333;
                    padding-bottom: 20px;
                    margin-bottom: 10px;
                }

                .tips {
                    float: left;
                    width: 370px;
                    padding: 20px 25px;
                    background: #f0f0f0;
                }

                h3 {
                    font: 600 18px/40px "Microsoft YaHei";
                }

                dl {
                    overflow: hidden;
                    .mod-l {
                        width:55%;
                        .r {

                            width: 94%;
                            padding-left: 6%;
                        }
                    }
                    .mod-r {
                        width: 44%;
                    }
                }
            }

            .mod4 {
                dl {
                    overflow: hidden;
                    .mod-l {
                        width:60%;
                    }
                    .mod-r {
                        width: 37%;
                    }
                }
            }
        }
    }
}

.bible {
    .footer {
        background: @mod_color;
    }
}
.style_travel {
    .banner {
        background: @travel_mod_color url("../img/bicycle_travel/bicycle_travel_2.png") no-repeat center 70px;
    }

    .creation-team {
        background: @travel_mod_color;
    }

    .header {
        .logo {
            background-image: url("../img/bicycle_travel/logo.png");
        }
    }
    //版面展示
    .content-test-read {
        .g-hd {
            strong {
                background: #1acdc2;
                color: #fff;
                font-weight: normal;
            }
        }
    }

    .footer {
        background: #219195;
    }
}